<template>
    <div class="main-body">
        <!--工具栏--> 
        <div class="toolbar">
            <el-form :model="filters" :inline="true">
                <el-form-item :label="t('sysUser.table.username')">
                    <el-input
                    v-model="filters.username"
                    :placeholder="t('sysUser.table.usernameHolder')" 
                    clearable
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                    icon="search"
                    type="primary"
                    @click="doSearch"
                    >{{ t('action.search') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button
                    icon="refreshRight"
                    type="danger"
                    @click="doReset"
                    >{{ t('action.reset') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button
                    icon="plus"
                    type="primary"   
                    @click="doAdd"                 
                    >{{ t('action.add') }}</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--表格-->
        <cm-table 
        ref="tableRef"
        :getPage="getPageForSysUser"
        :filters="filters"
        :columns="columns"
        :operations="operations"
        @handleEdit="doEdit"
        @handleDelete="handleDelete"
        ></cm-table>

        <!--新增/编辑对话框-->
        <el-dialog
        :title="isEdit ? t('action.edit') : t('action.add')"
        v-model="dialogVisible"
        draggable
        width="40%"
        :close-on-click-modal="false"
        @close="doClose"
        >
            <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="80px"
            label-position="right"
            >
                <el-form-item label="username" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>                
            </el-form>
            <template #footer>
                <el-button @click="doClose">{{ t('action.cancel') }}</el-button>
                <el-button
                type="primary"
                :loading="formLoading"
                @click="handleSubmit"
                >{{ t('action.submit') }}</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { getPageForSysUser, saveSysUser, updateSysUser, deleteSysUsers } from "@/apis/sysUser"
import { ElMessage } from "element-plus"
import useTableHandlers from "../use-table-handlers"

const filters = reactive({
    username: ""
})

const form = reactive({
    id: "",
    username: ""    
})

const { 
    t, 
    tableRef, 
    dialogVisible, 
    isEdit, 
    formLoading, 
    formRef, 
    doSearch, 
    doAdd, 
    doEdit,
    doSubmit, 
    doClose,
    doReset,
    doDelete } = useTableHandlers(form, filters)
    

function handleSubmit() {
    doSubmit({save: saveSysUser, update: updateSysUser})
}


//const { t } = useI18n()

// // ref引用
// const tableRef = ref()
// const formRef = ref()

// // 定义变量
// // 工具栏使用
// const filters = reactive({
//     username: ""
// })
// const __filtersOld__ = { ...filters }

// 表格使用
const operations = [
    {
        type: "edit",
    },
    {
        type: "delete"
    }
]

// // 对话框使用
// const dialogVisible = ref(false)
// const isEdit = ref(false)
// const formLoading = ref(false)
// const form = reactive({
//     id: "",
//     username: ""    
// })
// const __formOld__ = { ...form }

// 计算属性
// 表格使用
const columns = computed(() => [
    {type: "selection"},
    {prop: "id", label: "ID", minWidth: "50", showOverflowTooltip: true},
    {prop: "username", label: t('sysUser.table.username'), minWidth: "120", showOverflowTooltip: true},
    {prop: "realname", label: t('sysUser.table.realname'), minWidth: "120", showOverflowTooltip: true},
    {prop: "nickname", label: t('sysUser.table.nickname'), minWidth: "120", showOverflowTooltip: true},
    {prop: "gender", label: t('sysUser.table.gender'), minWidth: "100", formatter: (row) => {
        return row.gender === 1 ? t('code.gender.female') : t('code.gender.male')
    }},
    {prop: "phone", label: t('sysUser.table.phone'), minWidth: "120",  showOverflowTooltip: true},
    {prop: "email", label: t('sysUser.table.email'), minWidth: "120",  showOverflowTooltip: true},
    {prop: "avatar", label: t('sysUser.table.avatar'), minWidth: "100",  isImage: true},
    {prop: "createTime", label: t('sysUser.table.createTime'), minWidth: "120", },
    {prop: "updateTime", label: t('sysUser.table.updateTime'), minWidth: "120", },
    {prop: "createUser", label: t('sysUser.table.createUser'), minWidth: "120", },
    {prop: "updateUser", label: t('sysUser.table.updateUser'), minWidth: "120", },
    {prop: "status", label: t('sysUser.table.status'), minWidth: "100", formatter: (row) => {
        return row.status === 1 ? t('code.status.ban') : t('code.status.normal')
    }},
])

// 对话框使用
const rules = computed(() => {
    return {
        username: [{required: true, message: "请输入用户名", trigger: ['blur']}]
    }
})

// // 函数
// // 工具栏使用
// function reset() {    
//     for (const k in __filtersOld__) {
//         filters[k] = __filtersOld__[k]
//     }
// }

// function handleAdd() {
//     dialogVisible.value = true
//     isEdit.value = false
// }

// // 表格使用
// function handleEdit(row) {
//     isEdit.value = true
//     dialogVisible.value = true
//     for (const k in form) {
//         if (k in row) {
//             form[k] = row[k]
//         }
//     }
// }

function handleDelete(ids, callback) {    
    doDelete({delete: deleteSysUsers}, ids, callback)  
}

// function findPage() {
//     tableRef.value.reload()
// }

// // 对话框
// function resetForm() {
//     for (const k in __formOld__) {
//         form[k] = __formOld__[k]
//     }
// }

// function closeDlg() {
//     dialogVisible.value = false
//     resetForm()
// }

// function handleSubmit() {
//     formRef.value.validate((valid) => {
//         if (!valid) return 
//         formLoading.value = true
//         let promise
//         const params = getParams()
//         if (isEdit.value) {
//             promise = upload(params)
//         } else {
//             promise = save(params)
//         }
//         promise.then(() => {
//             ElMessage({
//                 message: t("tips.success"),
//                 type: "success",
//                 showClose: true
//             })

//             closeDlg()
//             if (isEdit.value) {
//                 tableRef.value.refresh()
//             } else {
//                 tableRef.value.reload()
//             }
//         }).finally(() => {
//             formLoading.value = false
//         })
//     })
// }

// function getParams() {
//     const params = { ...form }
//     if (!isEdit.value) {
//         delete params.id
//     }

//     return params
// }
</script>